<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03_准备-js中的error</title>
</head>

<body>
  <script>

    /*
      进一步理解 JS中的错误(Error)和错误处理
      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error

      1. 错误的类型
        Error: 所有错误的父类型
        ReferenceError: 引用的变量不存在
        TypeError: 数据类型不正确
        RangeError: 数据值不在其所允许的范围内 ~~ 死循环
        SyntaxError: 语法错误

      2. 错误处理
        捕获错误: try{} catch(){}
        抛出错误: throw error

      3. 错误对象
        message属性: 错误相关信息
        stack属性:   记录信息
    */


    // #region 错误类型
    // 1. 演示: ReferenceError: 引用的变量不存在
    // console.log(a);
    // Uncaught ReferenceError: a is not defined

    // 2. 演示: TypeError: 数据类型不正确
    // function demo (){};
    // demo()();
    // Uncaught TypeError: demo(...) is not a function

    // 3. 演示: RangeError: 数据值不在其所允许的范围内 ~~ 死循环
    // function demo (){ demo() };
    // demo();
    // Uncaught RangeError: Maximum call stack size exceeded

    // 4. 演示: SyntaxError: 语法错误
    // console.log(a
    // Uncaught SyntaxError: missing ) after argument list
    // #endregion


    // #region 错误处理
    // 如何捕获一个错误
    /**
     * try 中放可能出现错误的代码, 一旦出现错误立即停止 try中代码的执行,
     * 调用 catch, 并携带错误信息
    */
    // try {
    //   console.log(1);
    //   console.log(a);
    //   console.log(2);
    // } catch (error) {
    //   console.log('代码执行出错了, 错误的原因是:', error);
    // }

    // 如何抛出一个错误
    // function demo() {
    //   const date = Date.now();
    //   if (date % 2) {
    //     console.log('偶数, 可以正常工作');
    //   } else {
    //     throw new Error('奇数, 不可以正常工作!!!');
    //   }
    // };
    // demo();
    // #endregion


    // #region 错误对象
    // 首先 throw error 抛出一个错误
    // function demo(){
    //   const date = Date.now();
    //   if (date % 2) {
    //     console.log('偶数, 可以正常工作');
    //   }else{
    //     throw new Error('奇数, 不可以正常工作!!!');
    //   }
    // };

    // 其次 try{} catch(){} 捕获这错误
    // try {
    //   demo();
    // } catch(error) {
    //   debugger;
    //   console.log('@:', error);
    // };
    // Scope 下可以看到 错误对象属性
    // #endregion

  </script>
</body>

</html>